<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, render } from "vue"

const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  Venn: {
    type: Object,
    default: {}
  }
})
// 组件中使用，接收事件的
// const emits = defineEmits(['onSearch']);

</script>
<template>
  <!-- 四类韦恩图 -->
  <div class="ven_four">
    <div class="ven_four_phone ven_four_round">
      <span>Phone</span>
    </div>
    <div class="ven_four_smoke ven_four_round">
      <span>Smoking</span>
    </div>
    <div class="ven_four_wheelchair ven_four_round">
      <span>Wheelchair</span>
    </div>
    <div class="ven_four_occlusion ven_four_round">
      <span>Occlusion</span>
    </div>
    
    <div class="ven_value van-phone">{{Venn.phone.value}}</div>
    <div class="ven_value van-smoke">{{Venn.smoke.value}}</div>
    <div class="ven_value van-wheelchair">{{Venn.wheelchair.value}}</div>
    <div class="ven_value van-occlusion">{{Venn.occlusion.value}}</div>

    <div class="ven_value van-phone_smoke">{{Venn.phone_smoke.value}}</div>
    <div class="ven_value van-phone_wheelchair">{{Venn.phone_wheelchair.value}}</div>
    <div class="ven_value van-phone_occlusion">{{Venn.phone_occlusion.value}}</div>
    <div class="ven_value van-smoke_wheelchair">{{Venn.smoke_wheelchair.value}}</div>
    <div class="ven_value van-smoke_occlusion">{{Venn.smoke_occlusion.value}}</div>
    <div class="ven_value van-wheelchair_occlusion">{{Venn.wheelchair_occlusion.value}}</div>
    
    <div class="ven_value van-phone_smoke_wheelchair">{{Venn.phone_smoke_wheelchair.value}}</div>
    <div class="ven_value van-phone_smoke_occlusion">{{Venn.phone_smoke_occlusion.value}}</div>
    <div class="ven_value van-smoke_wheelchair_occlusion">{{Venn.smoke_wheelchair_occlusion.value}}</div>
    <div class="ven_value van-phone_wheelchair_occlusion">{{Venn.phone_wheelchair_occlusion.value}}</div>

    <div class="ven_value van-phone_smoke_wheelchair_occlusion">{{Venn.phone_smoke_wheelchair_occlusion.value}}</div>
  </div>
  <!-- 三类韦恩图 -->
  <!-- <div class="Ven_pic">
    <div class="Ven_pic_phone Ven_pic_round">
      <span class="txt_Phone">Phone</span>
    </div>
    <div class="Ven_pic_smoke Ven_pic_round">
      <span class="txt_Smoke">Smoking</span>
    </div>
    <div class="Ven_pic_wheelchair Ven_pic_round">
      <span class="txt_Wheelchair">Wheelchair</span>
    </div>
    <div class="Ven_value Ven_value_phone">{{Venn.phone.value}}</div>
    <div class="Ven_value Ven_value_phone_smoke">{{Venn.phone_smoke.value}}</div>
    <div class="Ven_value Ven_value_smoke">{{Venn.smoke.value}}</div>
    <div class="Ven_value Ven_value_phone_wheelchair">{{Venn.phone_wheelchair.value}}</div>
    <div class="Ven_value Ven_value_phone_smoke_wheelchair">{{Venn.phone_smoke_wheelchair.value}}</div>
    <div class="Ven_value Ven_value_smoke_wheelchair">{{Venn.smoke_wheelchair.value}}</div>
    <div class="Ven_value Ven_value_wheelchair">{{Venn.wheelchair.value}}</div>
  </div> -->
</template>
<style scoped lang="less">
.ven_four{
  width: 296px;
  height: calc(100% - 24px);  // 296px
  position: relative;
  margin: 0 auto;
  .van-phone_smoke_wheelchair_occlusion{
    left: 52%;
    top: 62%;
  }
  .van-phone_wheelchair_occlusion{
    left: 132px;
    top: 220px;
  }
  .van-phone_smoke_occlusion{
    left: 175px;
    top: 220px;
  }
  .van-smoke_wheelchair_occlusion{
    left: 188px;
    top: 130px;
  }
  .van-phone_smoke_wheelchair{
    left: 120px;
    top: 130px;
  }
  .van-wheelchair_occlusion{
    right: 73px;
    top: 86px;
  }
  .van-smoke_occlusion{
    right: 76px;
    top: 200px;
  }
  .van-smoke_wheelchair{
    left: 52%;
    top: 80px;
  }
  .van-phone_occlusion{
    left: 52%;
    bottom: 30px;
  }
  .van-phone_wheelchair{
    left: 100px;
    top: 200px;
  }
  .van-phone_smoke{
    left: 94px;
    top: 88px;
  }
  .van-occlusion{
    right: 40px;
    top: 40%;
  }
  .van-wheelchair{
    right: 95px;
    top: 50px;
  }
  .van-smoke{
    left: 110px;
    top: 50px;
  }
  .van-phone{
    left: 60px;
    top: 120px;
  }
  .ven_value{
    position: absolute;
    transform: translate(-50%, -50%);
    user-select: none;
  }

  .ven_four_round{
    position: absolute;
    width: 120px; 
    height: 80%;
    border-radius: 70%;
  }
  .ven_four_wheelchair{
    top: 5%;
    left: calc(50% - 56px);
    transform: rotate(30deg);
    background-color: rgba(224, 171, 36, 0.2);
    span{
      position: absolute;
      left: 40px;
      top: -30px;
      color: rgb(224, 171, 36);
      background-color: transparent;
      transform: rotate(-30deg);
    }
  }
  .ven_four_smoke{
    top: 5%;
    left: calc(50% - 52px);
    transform: rotate(-30deg);
    background-color: rgba(248, 122, 13, 0.2);
    span{
      position: absolute;
      left: 0px;
      top: -35px;
      color: rgb(248, 122, 13);
      background-color: transparent;
      transform: rotate(30deg);
    }
  }
  .ven_four_occlusion{
    top: 15%;
    left: calc(50% - 10px);
    transform: rotate(30deg);
    background-color: rgba(183, 110, 222, 0.2);
    span{
      position: absolute;
      left: 40px;
      top: -30px;
      color: rgb(183, 110, 222);
      background-color: transparent;
      transform: rotate(-30deg);
    }
  }
  .ven_four_phone{
    top: 15%;
    left: calc(50% - 100px);
    transform: rotate(-30deg);
    background-color: rgba(250, 56, 59, 0.2);
    span{
      position: absolute;
      left: 0px;
      top: -35px;
      color: rgba(250, 56, 59, 1);
      background-color: transparent;
      transform: rotate(30deg);
    }
  }
}

// 三类韦恩图
// .Ven_pic{
//   width: 296px;
//   height: calc(100% - 24px);  // 296px
//   position: relative;
//   margin: 0 auto;
//   .Ven_value{
//     position: absolute;
//     transform: translate(-50%, -50%);
//     user-select: none;
//   }
//   .Ven_value_phone{
//     left: 24%;
//     top: 30%;
//   }
//   .Ven_value_phone_smoke{
//     left: 50%; 
//     top: 25%;
//   }
//   .Ven_value_smoke{
//     right: 20%;
//     top: 30%;
//   }
//   .Ven_value_phone_wheelchair{
//     left: 34%;
//     top: 53%;
//   }
//   .Ven_value_phone_smoke_wheelchair{
//     left: 50%;
//     top: 44%;
//   }
//   .Ven_value_smoke_wheelchair{
//     right: 28%;
//     top: 53%;
//   }
//   .Ven_value_wheelchair{
//     left: 50%;
//     bottom: 22%;
//   }
//   .Ven_pic_round{
//     position: absolute;
//     transform: translate(-50%, -50%);
//     width: 160px;
//     height: 160px;
//     border-radius: 99999px;
//   }
  
//   .txt_Phone{
//     color: #FB393C;
//     background-color: transparent;
//   }
//   .txt_Smoke{
//     color: #F8780B;
//     background-color: transparent;
//   }
//   .txt_Wheelchair{
//     color: #E0AA26;
//     background-color: transparent;
//   }
//   .Ven_pic_phone{
//     top: 108px;
//     left: calc(50% - 40px);
//     background-color: rgba(230, 11, 24, 0.2);
//     span{
//       position: absolute;
//       left: -20px;
//       top: 4px;
//     }
//   }
//   .Ven_pic_smoke{
//     top: 108px;
//     left: calc(50% + 40px);
//     background-color: rgba(248, 120, 11, 0.2);
//     span{
//       position: absolute;
//       right: -22px;
//       top: 4px;
//     }
//   }
//   .Ven_pic_wheelchair{
//     bottom: -40px;
//     left: 50%;
//     background-color: rgba(224, 170, 38, 0.2);
//     span{
//       position: absolute;
//       left: 50%;
//       bottom: -30px;
//       transform: translate(-50%, -50%);
//     }
//   }
// }
</style>
